<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对话框Demo</title>

    <link rel="stylesheet" href="../../bootstrap-4.0.0-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="../../jQuery/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="../css/dialog.css">
    <script type="text/javascript" src="../js/dialog.js"></script>
    <style>
        .topDiv {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="testDiv">
    <div class="topDiv">
        deded
    </div>
    <div>
        <button type="button" value="test" class="testBtn">showDialog</button>
        <button type="button" value="test" class="testBtn2">showDefaultDialog</button>
    </div>
    <!--以下为对话框元素-->
    <div class="simpleDialog myDialog">
        <div class="dialog animated">
            <img class="dialogIco" width="50" height="50" src="../img/ico.png" alt="" />
            <div class="dialogTop">
                <a href="javascript:;" class="claseDialogBtn">关闭</a>
            </div>
            <div>
                <button type="button" value="test" class="innerBtnY">success</button>
                <button type="button" value="test" class="innerBtnN">fail</button>
            </div>
        </div>
        <div class="dialogBg">
            <img src="../img/loadingGif.gif">
            <label class="success">成功</label>
            <label class="fail">失败</label>
        </div>
    </div>
    <div class="simpleDialog default">
        <div class="dialog default animated2">
            <div class="row message">
                <span class="col-md-12">确认删除吗？删除后将无法恢复</span>
            </div>
            <div class="btnGroup">
                <div class="">
                    <button type="button" class="btn btn-light cancelBtn">取消</button>
                    <button type="button" class="btn btn-primary conformBtn">确认</button>
                </div>
            </div>
        </div>
        <div class="dialogBg">
            <img src="../img/loadingGif.gif">
            <label class="success">成功</label>
            <label class="fail">失败</label>
        </div>
    </div>
</div>

</body>
<script>
    $(function () {
        initDialogDefault('.testBtn2', '.simpleDialog.default', function () {

        });
        initDialog('.testBtn', '.simpleDialog.myDialog', function () {
            console.log('');
        });
        $('.innerBtnY').click(function () {
           finishDialog('.simpleDialog.myDialog');
           setTimeout(resultDialog(true, '.simpleDialog.myDialog', function () {
               console.log("This is successful state.");
           }), 5000);
        });

        $('.innerBtnN').click(function () {
            finishDialog('.simpleDialog.myDialog');
            setTimeout(resultDialog(false, '.simpleDialog.myDialog', function () {
                console.log("This is failed state.");
            }), 5000);
        });
    });
</script>
</html>